<template>
    <div>
        <h2>v-for指令的应用</h2>
        <div>
            <p v-for="(item,i) in foods" :key="item.id">
                {{i+1}}.亮哥喜欢吃“{{item.name}}”，{{item.price}}钱一份，
                手里拿了
                <button :disabled="item.count<=1" @click="item.count--">-</button>
                {{item.count}}
                <button @click="item.count++">+</button>
                份
            </p>
            一共花了：<b>￥{{getTotal()}}</b>
            一共花了：<b>￥{{total}}</b>
        </div>
        <hr>
        <!-- 第二种用法，遍历字符串数组 -->
        <p v-for="item in movies" :key="item">
            亮哥喜欢看：《{{item}}电影名》
        </p>

        <hr>

        <!-- 第一种用法，重复输出固定数量的dom元素 针对数字进行遍历 -->
        <p v-for="item in 3" :key="item">
           {{item}}. 亮亮说，小新的非洲女朋友分手了!
        </p>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                foods:[
                    {id:1,name:'臭豆腐',price:15.5,count:2},
                    {id:2,name:'鲱鱼罐头',price:65.5,count:3},
                    {id:3,name:'毛鸡蛋',price:5.5,count:4},
                    {id:4,name:'大号榴莲',price:155.5,count:5},
                ],

                movies: ['煎饼的故事','小新与单杠','我的非洲女友','煎饼的故事2022']
            }
        },
        methods:{
            getTotal(){
                let sum = 0
                this.foods.forEach(item => {
                    sum += item.price * item.count
                })
                return sum
            },
        },
        computed: {
            total() {
               let sum = 0
                this.foods.forEach(item => {
                    sum += item.price * item.count
                })
                return sum
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>